<template>
  <section>
    <div class="target info-container">
      <div v-for="(item, idx) in chartData?.slice(0, 3)" :key="idx">
        <div>{{ item.name }}</div>
        <div>{{ item.value }}</div>
      </div>
    </div>
    <div class="area info-container">
      <div v-for="(item, idx) in chartData?.slice(-3)" :key="idx">
        <div>{{ item.name }}</div>
        <div>{{ item.value }}</div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { itratorObjectKeys } from '@/utils'

  interface Props {
    TargetMonitoringInfoData: Record<string, any>
  }

  // const props = withDefaults(defineProps<Props>(), {
  //   TargetMonitoringInfoData: () => ({
  //     target: 'HY002',
  //     targetDistance: `${Number((Math.random() * 10000 + 2).toFixed())}公里`,
  //     targetArrival: `${(Number((Math.random() * 10000 + 2).toFixed()) / 700).toFixed()}分钟`,
  //     area: '东海防空识别区',
  //     areaDistance: `${Number((Math.random() * 10000 + 2).toFixed())}公里`,
  //     areaArrival: `${(Number((Math.random() * 10000 + 2).toFixed()) / 700).toFixed()}分钟`,
  //   }),
  // });

  const targetDistance = ref(87.6)
  const targetArrival = ref(200)

  const areaDistance = ref(21.9)
  const areaArrival = ref(50)

  const chartData = ref<any>([
    { name: '距离最近敏感目标', value: '东海油田' },
    { name: '距离', value: '87.6海里' },
    { name: '预计抵达', value: '200秒' },
    { name: '距离最近敏感区域', value: '东海防空识别区' },
    { name: '距离', value: '21.85海里' },
    { name: '预计抵达', value: '50秒' }
  ])

  let isIncrease = false
  setInterval(() => {
    if (!isIncrease) {
      targetDistance.value -= 0.14
      areaDistance.value -= 0.14

      targetArrival.value -= 1
      areaArrival.value -= 1
    } else {
      targetDistance.value += 0.14
      areaDistance.value += 0.14

      targetArrival.value += 1
      areaArrival.value += 1
    }

    const data = {
      target: '东海油田',
      targetDistance: `${targetDistance.value.toFixed(2)}海里`,
      targetArrival: `${targetArrival.value}秒`,
      area: '东海防空识别区',
      areaDistance: `${areaDistance.value.toFixed(2)}海里`,
      areaArrival: `${areaArrival.value}秒`
    }

    const dataMap = {
      target: '距离最近敏感目标',
      targetDistance: '距离',
      targetArrival: '预计抵达',
      area: '距离最近敏感区域',
      areaDistance: '距离',
      areaArrival: '预计抵达'
    }

    chartData.value = itratorObjectKeys(data, dataMap)

    if (areaArrival.value === 6) {
      isIncrease = true
    }
  }, 1000)
</script>

<style lang="less" scoped>
  section {
    background: linear-gradient(180deg, rgba(209, 234, 255, 0.8), #ffffff);
    border: 1px solid #ffffff;
    border-radius: 4px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    row-gap: 10px;

    .info-container {
      & > div {
        display: grid;
        grid-template-rows: auto;
        grid-template-columns: 50% 50%;
        align-items: center;
        justify-items: center;
        height: 40px;
      }

      & > div:not(:nth-child(1)) {
        height: 30px;
      }

      & > div:nth-child(1) {
        background-color: #48a8e2;
      }

      & > div:nth-child(3) {
        background-color: #d2ebfb;
      }
    }

    .head {
      background-color: #48a8e2;
    }
  }
</style>
